<template>
  <div class="sick">
    <el-card shadow="hover">
      <div class="show-info">
        <el-form ref="form" :model="form" label-width="80px">
          <fieldset>
            <legend align="left">医院信息</legend>
            <el-form-item label="医院名称">
              <el-input placeholder="请输入医院名称" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="doFindLike"></el-button>
              </el-input>
            </el-form-item>

            <!-- <el-form-item label="地址">
              <el-select v-model="form.provinceId" placeholder="请选择省" @change="findAllCity" clearable>
                <el-option v-for="item in options1" :key="item.provinceId" :label="item.provinceName"
                  :value="item.provinceId">
                </el-option>
              </el-select>
              <el-select v-model="form.cityId" placeholder="请选择市" @change="findAllCounty" clearable>
                <el-option v-for="item in options2" :key="item.cityId" :label="item.cityName" :value="item.cityId">
                </el-option>
              </el-select>
              <el-select v-model="form.countyId" placeholder="请选择县" clearable>
                <el-option v-for="item in options3" :key="item.countyId" :label="item.countyName" :value="item.countyId">
                </el-option>
              </el-select>
            </el-form-item> -->
          </fieldset>
        </el-form>
      </div>
    </el-card>
    <el-card shadow="hover">
      <div class="btn-event">
        <el-button @click="addUI" type="primary" class="left">添加
        </el-button>
        <el-button @click="updateTable" type="info" class="left">重置</el-button>
        <el-button @click="importxls" class="left" type="success" icon="el-icon-upload2">导入
        </el-button>
        <el-button @click="exportxls" class="left" type="warning" icon="el-icon-download">导出
        </el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <el-table :data="tableData" height="480" style="width: 100%; margin-bottom: 20px" row-key="permissionId" border fit
        show-header @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="hId" width="85" label="医院id" sortable></el-table-column>
        <el-table-column prop="hName" label="医院名称" sortable>
        </el-table-column>
        <el-table-column prop="empName" label="医院管理员" sortable>
        </el-table-column>
        <el-table-column prop="empPhone" label="管理员电话" sortable>
        </el-table-column>
        <el-table-column prop="hCard" label="银行卡号" sortable>
        </el-table-column>
        <el-table-column prop="hMoney" label="收益分成" sortable>
        </el-table-column>

        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" @click="updateUI(scope.row)" size="mini" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button type="danger" @click="del(scope.row)" icon="el-icon-delete" size="mini">
              </el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.page"
        :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.size" layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </el-card>

    <el-dialog title="医院" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="医院名称：" :label-width="formLabelWidth">
          <el-input v-model="form.hName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="所在省：" :label-width="formLabelWidth">
          <el-select v-model="form.provinceId" placeholder="请选择省" @change="findAllCity">
            <el-option v-for="item in options1" :key="item.provinceId" :label="item.provinceName"
              :value="item.provinceId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在市：" :label-width="formLabelWidth">
          <el-select v-model="form.cityId" placeholder="请选择市" @change="findAllCounty">
            <el-option v-for="item in options2" :key="item.cityId" :label="item.cityName" :value="item.cityId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所在县：" :label-width="formLabelWidth">
          <el-select v-model="form.countyId" placeholder="请选择县">
            <el-option v-for="item in options3" :key="item.countyId" :label="item.countyName" :value="item.countyId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="医院管理员:" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.username" autocomplete="off"></el-input> -->
          <el-select v-model="form.empId" placeholder="请选择该医院管理员">
            <el-option v-for="item in options4" :key="item.empId" :label="item.empName" :value="item.empId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分成:" :label-width="formLabelWidth">
          <el-input v-model="form.hMoney" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号:" :label-width="formLabelWidth">
          <el-input v-model="form.hCard" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="Excel数据导入" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-upload class="upload-demo" action="http://localhost:8080/hospital/import"
        accept=".csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :on-success="onSuccess" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadxls">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {
  findAll,
  doexportxls,
  doSaveOrUpdate,
  dodel,
  dofindAllProvince,
  dofindAllCity,
  dofindAllCounty,
  findLike,
  dofindAllDockUser,
  doFindDockUserByHId,
  doFindAllEmp
} from '@/api/hospital/index.js';

export default {
  mounted() {

    this.updateTable();
  },
  data() {
    return {
      form: {},
      tableData: [],
      input: '',
      dialogFormVisible: false,
      formLabelWidth: '180px',
      dialogVisible: false,
      fileList: [],
      pageInfo: {
        total: 0,
        page: 1,
        size: 5,
      },
      options1: [],
      options2: [],
      options3: [],
      options4: [],
    };
  },
  methods: {
    doFindLike() {
      findLike(this.input).then((r) => {
        if (r.code == 200 && r.data != null) {
          console.log(r);
          this.tableData = r.data;
        } else {
          alert('无数据');
        }
      });
    },
    findAllCity() {
      this.options2 = [];
      this.options3 = [];

      dofindAllCity(this.form.provinceId).then((r) => {

        this.options2 = r.data;

      });
    },
    findAllCounty() {
      this.options3 = [];
      dofindAllCounty(this.form.cityId).then((r) => {
        this.options3 = r.data;
      });
    },
    handleSizeChange(size) {
      this.pageInfo.size = size;
      this.updateTable();
    },
    handleCurrentChange(page) {
      this.pageInfo.page = page;
      this.updateTable();
    },
    saveOrUpdate() {
      doSaveOrUpdate(this.form).then((r) => {
        if (r.code == 200) {
          this.dialogFormVisible = false;
          this.$message.success(r.msg);
          this.updateTable();
        }
      });
    },
    uploadxls() {
      this.dialogVisible = false;
    },
    onSuccess() {
      this.updateTable();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {
        });
    },
    importxls() {
      this.dialogVisible = true;
    },
    exportxls() {
      window.location.href = 'http://localhost:8080/hospital/download';
    },
    addUI() {
      this.form = {};
      this.dialogFormVisible = true;
      dofindAllProvince().then((r) => {
        this.options1 = r.data;
      });
      // dofindAllDockUser().then((r) => {
      //   this.options4 = r.data;
      // });
      doFindAllEmp().then(r=>{
        this.options4 = r.data;
      });
    },
    updateTable() {
      findAll(this.pageInfo).then((r) => {
        this.tableData = r.data.list;
        this.pageInfo.total = r.data.total;
      });
      dofindAllProvince().then((r) => {
        this.options1 = r.data;
      });
    },
    updateUI(row) {
      this.dialogFormVisible = true;
      this.form = row;
      // doFindDockUserByHId(row.hId).then(r=>{
      //   this.options4 = r.data;
      // });
      // dofindAllDockUser().then((r) => {
      //   this.options4 = r.data;
      // });
      doFindAllEmp().then(r=>{
        this.options4 = r.data;
      });
      dofindAllProvince().then((r) => {
        this.options1 = r.data;
      });
      this.findAllCity();
      this.findAllCounty();
    },
    del(row) {
      this.$confirm('确认删除?')
        .then(() => {
          let hId = row.hId;
          dodel(hId).then((r) => {
            if (r.code == 200) {
              this.updateTable();
              this.$message.success(r.msg);
              return;
            }
            this.$message.error(r.msg);
          });
        })
        .catch(() => {
        });
    },
  },
};
</script>

<style scoped>
.show-info {
  display: flex;
  text-align: left;
}

.el-card {
  margin: 10px 0;
  padding: 10px 0;
}

.show-info .el-select {
  margin-right: 10px;
}

fieldset {
  border: 1px solid #ddd;
  height: 100%;
}

legend {
  font-size: 18px;
  padding: 20px;
  margin-left: 20px;
  box-sizing: border-box;
  box-sizing: border-box;
}

.show-info .el-form {
  width: 80vw;
}

.show-info .el-input {
  width: 480px;
}

.btn-event {
  display: flex;
  align-items: center;
}

* {
  margin: 0;
  padding: 0;
}

.el-pagination {
  text-align: left;
}
</style>
